<style>
    .li {
        padding: 0 20px;
        font-size: 1.6rem;
    }

    .am-active {
        color: #F8D943;
    }
</style>
<script>
    window.onload = function () {
        const inputId = document.getElementById('inputId')
        inputId.value = null
    }
    function btn(type) {
        const cardLiDom = document.querySelectorAll('#liListId .li')
        cardLiDom.forEach(function (item) {
            // 获取所有类名
            var classes = item.className.split(/\s+/);
            // 查找并移除特定的类名
            var index = classes.indexOf('am-active');
            if (index >= 0) {
                classes.splice(index, 1);
            }

            // 将更新后的类名设置回元素
            item.className = classes.join(' ');
        });
        const liBox = document.getElementById(type)
        liBox.className = 'li am-active form-table-operate-top-search-submit'
        const inputId = document.getElementById('inputId')
        const status = liBox.getAttribute('status')
        if (status == '11') {
            inputId.value = null
        } else {
            inputId.value = status
        }
    }
</script>
<form class="am-form form-validation-search" method="post"
    action="{{if isset($form_table['base']['is_search']) and $form_table['base']['is_search'] eq 1 and !empty($form_table['base']['search_url'])}}{{$form_table.base.search_url}}{{/if}}"
    request-type="jump"
    request-value="{{if isset($form_table['base']['is_search']) and $form_table['base']['is_search'] eq 1 and !empty($form_table['base']['search_url'])}}{{$form_table.base.search_url}}{{/if}}">
    <input type="hidden" name="status" id="inputId">
    <ul id="liListId" class="am-nav am-nav-pills user-center-admin-nav" style="margin-bottom: 20px;">
        <li onclick="btn('all')" id="all" status="11" class="li am-active form-table-operate-top-search-submit"
            style="cursor: pointer;">
            全部
        </li>
        <li onclick="btn('dqr')" id="dqr" status="0" class="li" style="cursor: pointer;">
            待確認
        </li>
        <li onclick="btn('dfk')" id="dfk" status="1" class="li" style="cursor: pointer;">
            待付款
        </li>
        <li onclick="btn('dfh')" id="dfh" status="2" class="li" style="cursor: pointer;">
            待發貨
        </li>
        <li onclick="btn('dsh')" id="dsh" status="3" class="li" style="cursor: pointer;">
            待收貨
        </li>
        <li onclick="btn('ywc')" id="ywc" status="4" class="li" style="cursor: pointer;">
            已完成
        </li>
        <li onclick="btn('yqx')" id="yqx" status="5" class="li" style="cursor: pointer;">
            已取消
        </li>
        <li onclick="btn('ygb')" id="ygb" status="6" class="li" style="cursor: pointer;">
            已關閉
        </li>
    </ul>
</form>